<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      button {
        border: none; /*取消默认的按钮边框*/
        padding: 6px 16px; /*内边框*/
        border-radius: 20px; /*边框圆润*/
        background: skyblue; /*背景颜色*/
        color: white; /*字体颜色*/
        transform: all 200ms ease-in-out; /*设置动画播放的时间和动画曲线*/
      }
      button:hover {
        transform: scale(1.2); /*放大1.2倍*/
        background-color: rgb(20, 185, 250); /*背景颜色*/
        color: black; /*字体颜色*/
        opacity: 0.5; /*透明度0~1*/
        transform: all 200ms ease-in-out; /*设置动画播放的时间和动画曲线*/
      }
      button:active {
        transform: scale(1.05); /*放大1.05倍*/
        transition: all 100ms ease-out; /*设置动画播放的时间和动画曲线*/
      }
    </style>
  </head>
  <body>
    <h1 id="x"></h1>
    <h1 class="abc" name = "y" id = "n"></h1>
    <button onclick="show()">按我</button>
    <!--<p id="x">123</p>-->
    <!--<button onclick="show()">按我</button>--><!--onclick 表示当按下按钮后-->
    <!-- alert 网页对话框 -->
    <!-- 可以弹出一个对话框然后显示括号内的内容 -->

    <!-- button 按钮 -->
    <!-- 方式一 -->
    <!-- onclick 一旦按下这个按钮后 -->
    <!-- 会做的 xx 事情 -->
    <!-- onclick里面的"东西" 可以写js代码-->
    <!-- <button onclick="alert('汤雅洁')">点我显示你的名字</button> -->
    <!-- <input type="button" value="点我显示你的名字" onclick="alert('汤雅洁')"/> -->
    <!-- <button onclick="alert('是的')">雷雷是笨蛋吗</button> -->
    <script>
      /* 变量的创建语法:
       let 变量名;  -> 声明(创建)变量
       let 变量名 = 变量内容;  -> 声明(创建)变量并赋值
      console.log("你好");
      document.write("<h1>你好</h1>")
      let name = '汤雅洁'
      document.write(name)
       比较运算符
       A == B 比对两个内容是否相等
       A < B 比对A是否小于B
       A > B 比对A是否大于B
       A != B 比对两个内容是否不相等
       A === B 比对两个内容是否相等并且类型也相等
       A !== B 比对两个内容是否不相等并且类型也不相等
      let a = '雨天'
      if(a == '晴天'){
      document.write('出去玩')
      }else{
      document.write('在家睡觉')
      }
       let a = "女";
       let b = 16;
       if (a == "女")
       {
         if (b < 18)
         {
           document.write("女孩");
         }
         else
         {
           document.write("女人");
         }
       }
       else
       {
         if (b < 18)
         {
           document.write("男人");
         }
         else
         {
           document.write("男孩");
         }
       }
       console.log("你好");
       document.write("你好");
       for (let i = 0; i < 10; i++) {
         console.log("你好");
       }
       for (let a = 5; a < 100; a++) {
         console.log(a);
         document.write(a, "</br>");
       }
       for (创建变量的语法;循环条件;执行循环前做的事情)
       {
           要循环执行的代码
       }
       显示5至100之间的数字，显示的时候
       包括5 但不包括100

       数组创建语法
       let 数组名 = [数组内容];
       数组里的每一个内容
       称作 -> 元素
       元素可以是任何的内容
       通过数组下标去获取数组中的某个元素
       数组名[数组下标]ji
       数组的下标都是从0开始算的
       和python不一样
       不允许通过负号下标获取末尾元素
       let a = [];
       console.log(a.length);
       我使用了数组里的push方法
       给数组末尾增加元素
       a.push(28);  [28]
       a.push([21]);  [28,[21]]
       a.push("abc");  [28,[21],"abc"]
       a.push();  [28,[21],"abc"]
       console.log(a.length);
       console.log(a);

       let b = [];
       b.push(28, 12, 32, 20, [], "ahdua");

        2 -> 要添加到某个元素前面的下标
        0 -> 要删除的包括它自己及后面的个数
        ... 要插入的内容
       b.splice(2, 1, "abc");
       console.log(b.length);
       console.log(b);
      let a = [1, 2, 3, 10.2, "123", true];
      console.log(a);
      for (let b = 0; b < 6; b++) {
        console.log(a[b]);
      }
      console.log(a.length);
      let a = document.querySelector(".abc");// y #n
      let a = document.getElementById("x"); //获得了id叫做x的标签控制权
      function show() {
        if ((a.textContent == "")) {
          a.textContent = "我出息了！";
        } else {
          a.textContent = "";
        }
        a.style.color = "blue";
      }*/
      
      console.log("小糖");
    </script>
  </body>
</html>
